<template>
  <div class="app-container ordinary">
    <div class="ordinary-left media-display-none">
      <el-tree :data="dataTable" @current-change="hanleChange" highlight-current ref="tree_radio" :props="{
					children: 'children',
					label: 'categoryName',
				}" :expand-on-click-node="false"></el-tree>
    </div>
    <div class="ordinary-right">
      <div class="ordinary-right-div" v-loading="loading" element-loading-text="拼命加载中">
        <div class="a-line-list" v-if="postList.length">
          <div class="a-line-list-item" v-for="(item,index) in postList" :key="index" @click="handleDeail(item)">
            <div class="a-line-list-item-content">
              <div class="title">{{item.title}}</div>
              <div class="time">
                <span class="el-icon-time"></span>
                <span> {{item.createTime | $YYYY_MM_DD}}</span>
              </div>
            </div>
          </div>
        </div>
        <el-empty v-else-if="!loading" :image-size="200"></el-empty>
          <el-pagination
            background
             v-show="total>0 && !loading"
            layout="prev, pager, next"
            :current-page.sync="queryParams.pageNum"
            :page-size.sync="queryParams.pageSize"
            @current-change="getList"
            :total="total">
          </el-pagination>
      </div>
    </div>
    <add-and-edit :fullscreen="false" ref="add-and-edit"></add-and-edit>
  </div>
</template>

<script>
  import {
    articleFind,
    articleRemove,
    articleDetail,
    articleBatchPublish
  } from "@/api/education/article";
  import {
    categoryFindList
  } from '@/api/education/column';
  import addAndEdit from "@/views/education/article/components/addAndEdit.vue";
  export default {
    name: "Ordinary",
    components:{
      addAndEdit
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        // 岗位表格数据
        postList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 12,
          categoryId: ''
        },
        dataTable: [],
      };
    },
    mounted() {
       categoryFindList({}).then(res => {
         this.dataTable = [{categoryName:'全部',categoryId:''},...this.handleTree(res.data, "categoryId")]
         setTimeout(()=>{
           this.$refs['tree_radio'].$el.children[0].click(); //展示全部
         },300)
       })
    },
    methods: {
      imgUrl(url) {
        if(url) return process.env.VUE_APP_BASE_API + url
        else return ''
      },
      handleDeail(options){ //查看详情
        articleDetail(options.id).then(res=>{
         this.$refs['add-and-edit'].init(3,res.data)
        })
      },
      getIds(options,arr = []){
        if(!Array.isArray(options)) options = [options]
        options.forEach(item=>{
          arr.push(item.categoryId)
          if(Array.isArray(item.children) && item.children.length){
              this.getIds(item.children,arr)
          }
        })
        return arr
      },
      // 操作树
      hanleChange(options) {
        // let ids = this.getIds(options) ids.join(',')
        this.queryParams.categoryId = options.categoryId
        this.getList();
      },
      /** 查询岗位列表 */
      getList() {
        this.loading = true;
        this.postList = []
        articleFind(this.queryParams).then(res => {
          this.postList = res.rows
          this.total = res.total;
          this.loading = false;
        })
      },
    }
  };
</script>
<style lang="scss" scope>
  @import "@/assets/styles/element-variables.scss";
  .ordinary{
    display: flex;

    .a-line-list{
      $width: 800px;
      .a-line-list-item{
        display: flex;
        padding: 20px 5px;
        border-bottom: 1px solid #f2f2f2;
        width: $width;
        .a-line-list-item-content{
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 80px;
          .title{
            width: 600px;
            font-weight: bold;
            font-size: 18px;
          }
          .time{
            margin-top: 10px;
            font-size: 12px;
            width: 200px;
            text-align: right;
          }
        }
      }

    }
    .ordinary-left{
      width: 350px;
      padding-right: 30px;
    }
    .ordinary-right{
      flex: 1;
      $width: 230px;
      $listWidth:780px;
      .ordinary-right-div{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: $listWidth;
        min-height: 300px;
        cursor: pointer;
      }
    }
  }
</style>
